<script setup lang="ts">
import type { AuthApi } from '@/apis/auth';
import { useAuthenticationStore } from '@/stores/auth';
import { EyeInvisibleOutlined, EyeTwoTone, LockOutlined, UserOutlined, VerifiedOutlined } from '@ant-design/icons-vue';

defineOptions({
  name: 'LoginPage',
});

const loginData = reactive<AuthApi.LoginRequest>({
  account: 'admin',
  password: '123456',
  answer: '888888',
  id: '',
});

const authStore = useAuthenticationStore();

const captcha = ref<string>('');

const loginLoading = ref<boolean>(false);

onMounted(() => {
  fetchCaptchaData();
});

function onVerifyCodeClick() {
  fetchCaptchaData();
}

async function onLoginClick() {
  loginLoading.value = true;
  await authStore.loginAction(loginData);
}

async function fetchCaptchaData() {
  await authStore.fetchCaptchaAction();
  loginData.id = authStore.captchaData.id;
  captcha.value = authStore.captchaData.captcha;
}
</script>

<template>
  <div class="content w-screen h-screen flex justify-center items-center">
    <div class="flex flex-col items-center p-5 w-96 border-[1px] shadow-lg rounded-lg">
      <img src="@/assets/icons/logo.svg" width="60" height="60" />
      <span class="font-bold text-[24px] italic text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500">
        管理系统
      </span>
      <div class="w-full mt-6 flex flex-col gap-y-3">
        <AInput v-model:value="loginData.account" size="large" placeholder="请输入账号/邮箱/手机号">
          <template #prefix>
            <UserOutlined class="text-secondary-title" />
          </template>
        </AInput>
        <AInputPassword v-model:value="loginData.password" size="large" placeholder="请输入登录密码">
          <template #prefix>
            <LockOutlined class="text-secondary-title" />
          </template>
          <template #iconRender="v">
            <EyeTwoTone v-if="v" />
            <EyeInvisibleOutlined v-else />
          </template>
        </AInputPassword>
        <div class="flex items-center gap-x-2">
          <AInput v-model:value="loginData.answer" size="large" placeholder="请输入验证码">
            <template #prefix>
              <VerifiedOutlined class="text-secondary-title" />
            </template>
          </AInput>
          <img :src="captcha" width="120" height="44" mode="widthFit" @click="onVerifyCodeClick" />
        </div>
      </div>
      <AButton class="mt-4 bg-primary h-11" :loading="loginLoading" block size="large" type="primary" @click="onLoginClick">
        登录
      </AButton>
      <span class="w-full mt-2 text-right text-primary">忘记密码？</span>
    </div>
  </div>
</template>

<style lang="less" scoped>
@media (min-width: 768px) {
  .content {
    background-image: url('@/assets/images/login-bg.svg');
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%;
  }
}
</style>
